<template>
  <div class="list-card">
    <div class="list-box" v-if="list.length">
      <div class="list" v-infinite-scroll="showMore" :infinite-scroll-disabled="disabled" infinite-scroll-distance="300">
        <motion.div
          v-for="(item, index) in list"
          :key="item.name"
          class="item"
          @click="handleClick(item, index)"
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          :transition="{ duration: 0.3, delay: item.index * 0.1 }"
        >
          <div class="img"><img width="100%" src="@/assets/images/img.png" alt=""></div>
          <div class="tips">
            <span v-for="tip in item.tips" :key="tip">{{ tip }}</span>
          </div>
          <div class="title">
            {{ item.name }}</div>
        </motion.div>
      </div>
      <div class="more" v-if="isShowAll"> 
        <el-button @click="showMore">全部案例→ </el-button>
      </div>
      <section v-if="loading" class="dots-container">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </section>  
      <p class="finish" v-if="isFinish">加载完成</p>
    </div>
    <div class="empty" v-else>
      <img src="@/assets/images/empty.png" alt="">
      <p class="name">暂无数据</p>
      <p class="tip">请重新搜索</p>
    </div>
</div>
</template>
<script setup>
import { motion } from "motion-v"
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'
const router = useRouter()
const isShowAll = ref(true)
const page = ref(1)
const pageSize = ref(6)
const total = ref(0)
const list = ref([])
const disabled = ref(true)
const loading = ref(false)
const isFinish = ref(false)
const handleClick = (item, index) => { 
  const isEven = index % 2 === 0
  if(isEven) {
    router.push(`/uploadDetail/${item.id}`)
  } else {
    router.push(`/detail/${item.id}`)
  }
}
watch(isShowAll, (newVal) => {
  pageSize.value = newVal ? 6 : 12
}, { immediate: true })
// 加载第一页
const getList = (type, search) => {
  window.scrollTo(0, 0)
  isFinish.value = false
  if(type === 'search') {
    isShowAll.value = false
    disabled.value = false
  } else {
    disabled.value = true
  }
  page.value = 1
  const loadingInstance = ElLoading.service({ target: '.list-card' })
  setTimeout(() => {
    console.log('search', search, page.value, pageSize.value)
    list.value = [
      { 
        id: 1,
        index: 0,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 2,
        index: 1,
        name: '文案标题文案标题文案标题文案题文文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 3,
        index: 2,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 4,
        index: 3,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 5,
        index: 4,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 6,
        index: 5,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      }
    ]
    loadingInstance.close()
  }, 1000)
}
// 展示更多
const showMore = () => {
  page.value ++
  isShowAll.value = false
  disabled.value = true
  loading.value = true
  setTimeout(() => {
    list.value.push(
      { 
        id: 7,
        index: 0,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 8,
        index: 1,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 9,
        index: 2,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 10,
        index: 3,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 11,
        index: 4,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 12,
        index: 5,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 13,
        index: 6,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 14,
        index: 7,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 15,
        index: 8,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 16,
        index: 9,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 17,
        index: 10,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      },
      { 
        id: 18,
        index: 11,
        name: '文案标题文案标题文案标题文案题文',
        tips: ['心肺', '脑科', '其他']
      }
    )
    disabled.value = false
    loading.value = false
    if(page.value == 5) {
      isFinish.value = true
      disabled.value = true
    }
    console.log('load', page.value, pageSize.value)
  }, 1000);
}
onMounted(() => {
  getList()
})
defineExpose({
  getList
})
</script>
<style lang="scss" scoped>
  .list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    padding: 20px;
    min-height: 150px;
    .item {
      text-align: left;
      cursor: pointer;
      .img {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        font-size: 0;
        margin-bottom: 6px;
        border: 2px solid transparent;
        img{
          transition: all 0.3s ease;
        }
        &:hover img{
          transform: scale(1.2);
        }
        &:hover{
          border: 2px solid #1E4FF0;
        }
      }
      .title {
        margin: 6px 0;
        font-size: 16px;
        color: #333;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tips {
        span {
          display: inline-block;
          padding: 2px 8px;
          margin-right: 8px;
          font-size: 12px;
          color: #fff;
          border-radius: 4px;
          &:nth-child(1){
            background: #1E4FF0;
          }
          &:nth-child(2){
            background: #00A4B0;
          }
          &:nth-child(3){
            background: #E15181;
          }
        }
      }
    }
  }
  .more{
    margin: 30px 0 50px;
  }
  .finish{
    text-align: center;
    font-size: 16px;
    color: var(--el-color-primary);
    margin:0 0 10px 0;
  }
  .dots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin-bottom: 20px;
    .dot {
      height: 10px;
      width: 10px;
      margin-right: 10px;
      border-radius: 10px;
      background-color: #b3d4fc;
      animation: pulse 1.5s infinite ease-in-out;
    }
    .dot:last-child {
      margin-right: 0;
    }

    .dot:nth-child(1) {
      animation-delay: -0.3s;
    }

    .dot:nth-child(2) {
      animation-delay: -0.1s;
    }

    .dot:nth-child(3) {
      animation-delay: 0.1s;
    }

    @keyframes pulse {
      0% {
        transform: scale(0.8);
        background-color: #b3d4fc;
        box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
      }

      50% {
        transform: scale(1.2);
        background-color: #6793fb;
        box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
      }

      100% {
        transform: scale(0.8);
        background-color: #b3d4fc;
        box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
      }
    }
  }


</style>